<?php
use front\assets\AppAsset;
?>
<?php
$this->title = '首页';
?>
<body class="u-pb3">
<a class="m-sch-btn" href="/web/search/index"><span>搜索</span></a>

<div id="j-slide" class="m-slide">
	<ul class="f-cb">
		<?php foreach($data['banner'] as $banner){?>
			<li><a href="<?= $banner['url']?>"><img src="<?= $banner['pic_url']?>" /></a></li>
		<?php }?>
	</ul>
</div>

<?php foreach($data['theme'] as $theme){?>
	<h4 class="m-topic"><a href="<?= $theme['url']?>"><img src="<?= $theme['pic']?>" /></a></h4>
<?php }?>


<div id="J_slt_idxTab" class="m-idx-tab f-cb">
	<a href="javascript:;" data class="z-on">热门</a>
	<a href="javascript:;">特价</a>
</div>

<div id="J_slt_idxCnt">

	<div class="m-idx-tras">
		<div>
			<h4 id="J_slt_idxTab0" class="f-cb m-idx-tab0">
				<a data-val="0" href="javascript:;" class="z-on">全部</a>

				<?php if(!empty($data['cate'])) {
					foreach ($data['cate'] as $k => $name) {
						?>
						<a data-val="<?= $k ?>" href="javascript:;"><?= $name ?></a>
					<?php }
				}?>
			</h4>
		</div>
	</div>

	<ul id="J_slt_idxCnt0" class="m-idx-list0">
		<?php foreach($data['hotPro'] as $hotPro){?>
			<li class="J_forLink" data-url="<?= Yii::$app->request->hostInfo . '/web/product/detail?pid=' . $hotPro['pid']?>">
				<a href="/web/product/detail?pid=<?= $hotPro['pid'] ?>"><img src="<?= $hotPro['img']?>" /></a>
				<h5>
					<a href="/web/product/detail?pid=<?= $hotPro['pid'] ?>"><?= $hotPro['name']?></a>
					<span><?= $hotPro['name']?></span>
					<em><i><?= $hotPro['comm']?></i><i><?= $hotPro['coll']?></i></em>
					<b>￥ <?= $hotPro['price']?></b>
				</h5>
			</li>
		<?php } ?>
	</ul>

<!--	<h5 class="m-idx-tt">新入驻品牌</h5>-->
<!--	<ul class="m-idx-nbr">-->
<!--		<li><img src="/static/img/tmp008.jpg" /></li>-->
<!--		<li><img src="/static/img/tmp008.jpg" /></li>-->
<!--	</ul>-->
<!---->
<!--	<h5 class="m-idx-tt">热门品类</h5>-->
<!--	<ul class="m-idx-hot f-cb">-->
<!--		<li><img src="/static/img/tmp010.jpg" /><a href="javascript:;">羽绒服</a></li>-->
<!--		<li><img src="/static/img/tmp010.jpg" /><a href="javascript:;">羽绒服</a></li>-->
<!--		<li><img src="/static/img/tmp010.jpg" /><a href="javascript:;">羽绒服</a></li>-->
<!--		<li><img src="/static/img/tmp010.jpg" /><a href="javascript:;">羽绒服</a></li>-->
<!--	</ul>-->
<!---->
<!--	<h5 class="m-idx-tt">热门品牌</h5>-->
<!--	<ul class="m-idx-hbr f-cb">-->
<!--		<li><img src="/static/img/tmp009.jpg" /></li>-->
<!--		<li><img src="/static/img/tmp009.jpg" /></li>-->
<!--		<li><img src="/static/img/tmp009.jpg" /></li>-->
<!--		<li><img src="/static/img/tmp009.jpg" /></li>-->
<!--		<li><img src="/static/img/tmp009.jpg" /></li>-->
<!--		<li><img src="/static/img/tmp009.jpg" /></li>-->
<!--		<li><img src="/static/img/tmp009.jpg" /></li>-->
<!--		<li><img src="/static/img/tmp009.jpg" /></li>-->
<!--		<li><img src="/static/img/tmp009.jpg" /></li>-->
<!--	</ul>-->

</div>

<div class="m-nav f-cb u-bg1">
	<a href="javascript:;" class="z-on">首页</a>
	<a href="/web/category/category-list?shop_id=1001">分类</a>
	<a href="/web/cart/view?shop_id=<?= '1001'//yii::$app->session->get('shop_id')?>">购物车</a>
	<a href="/web/my">我的</a>
</div>

<!-- 横向滚动 -->
<script>
	// 焦点图
	$('#j-slide').touchSlide({'scale':.495, speed:.3});

	// 滑动选择
	$('#J_slt_idxTab0').transformX();

	$(function(){

		// 商品 区域链接 点击
		// demo <li class="J_forLink" data-url="http://git.oschina.net/">
		$(document.body).on('tap', '.J_forLink', function(){

			window.location.href = $(this).attr('data-url');
		});

		// 热门 & 特价
		var zon = 'z-on';
		$('#J_slt_idxTab').on('tap', 'a', function(){

			var _that = $(this);

			if(_that.hasClass(zon)) return !1;

			_that.addClass(zon).siblings().removeClass(zon);

			var _i = _that.index();

			if(_i == 0){

				// 动态加载数据
				$.ajax({ url: '/web/default/discart?funcName=?', dataType:'jsonp', data:{'type': _i}, async: false,

					success: function(_info){

						var _prod = createProd0(_info['prod'], _i);

						// 动态创建类别
						var _cate = createCate(_info['cate'], _i);
						var _html0 = createList0(_info['list0'], '新入驻品牌');
						var _html1 = createList1(_info['list1'], '热门品类');
						var _html2 = createList2(_info['list2'], '热门品牌');

						// 页面生成
//						$('#J_slt_idxCnt').html(_cate + _prod + _html0 + _html1 + _html2);
						$('#J_slt_idxCnt').html(_cate + _prod);
						// 滑动
						$('#J_slt_idxTab0').transformX();
					}
				});

			}else{

				// 动态加载数据
				$.ajax({ url: '/web/default/discart?funcName=?', dataType:'jsonp', data:{'type': _i}, async: false,

					success: function(_info){

						var _prod = createProd1(_info['prod'], _i);

						// 动态创建类别
						var _cate = createCate(_info['cate'], _i);
						var _html1 = createList1(_info['list1'], '品类折扣');
						var _html2 = createList2(_info['list2'], '品牌折扣');

						// 页面生成
//						$('#J_slt_idxCnt').html(_cate + _prod + _html1 + _html2);
						$('#J_slt_idxCnt').html(_cate + _prod);
					}
				});
			}

		});

		// 热门 元素
		$('#J_slt_idxCnt').on('tap', '#J_slt_idxTab0 a', function(){

			var _that = $(this);

			var _that = $(this);

			if(_that.hasClass(zon)) return !1;

			_that.addClass(zon).siblings().removeClass(zon);

			var _val = _that.attr('data-val');

			// 动态加载数据
			$.ajax({ url: '/web/default/hotpro?funcName=?', dataType:'jsonp', data:{'type':_val},

				success: function(_info){

					$('#J_slt_idxCnt0').html(createProd0(_info, 0, false));
				}
			});

		});

		// 特价 元素
		$('#J_slt_idxCnt').on('tap', '#J_slt_idxTab1 a', function(){

			var _that = $(this);

			var _that = $(this);

			if(_that.hasClass(zon)) return !1;

			_that.addClass(zon).siblings().removeClass(zon);

			var _val = _that.attr('data-val');

			// 动态加载数据
			$.ajax({ url: '/web/default/dispro?funcName=?', dataType:'jsonp', data:{'type':_val},

				success: function(_info){

					$('#J_slt_idxCnt1').html(createProd1(_info, 1, false));
				}
			});
		});
	});

	function createCate(json, chr){

		var _cate = '';
		var i, x = 0;
		for(var i in json){

			_cate += '<a data-val="'+ i +'" href="javascript:;"'+ (x === 0 ? ' class="z-on"' : '') +'>'+ json[i] +'</a>';
			x++;
		}

		if(_cate !== '') _cate = '<div class="m-idx-tras"><div><h4 id="J_slt_idxTab'+ chr +'" class="f-cb m-idx-tab'+ chr +'">'+ _cate +'</h4></div></div>';

		return _cate;
	}

	function createList0(json, name){

		var _html = '';

		for(var i in json){

			_html += '<li><a href="javascript:;'+ i +'"><img src="'+ json[i]['img'] +'" /></a></li>';
		}

		if(_html !== '') _html = '<h5 class="m-idx-tt">'+ name +'</h5><ul class="m-idx-nbr">'+ _html +'</ul>';

		return _html;
	}

	function createList1(json, name){

		var _html = '';

		for(var i in json){

			_html += '<li><img src="'+ json[i]['img'] +'" /><a href="javascript:;'+ i +'">'+ json[i]['name'] +'</a></li>';
		}

		if(_html !== '') _html = '<h5 class="m-idx-tt">'+ name +'</h5><ul class="m-idx-hot f-cb">'+ _html +'</ul>';

		return _html;
	}

	function createList2(json, name){

		var _html = '';

		for(var i in json){

			_html += '<li><a href="javascript:;'+ i +'"><img src="'+ json[i]['img'] +'" /></a></li>';
		}

		if(_html !== '') _html = '<h5 class="m-idx-tt">'+ name +'</h5><ul class="m-idx-hbr f-cb">'+ _html +'</ul>';

		return _html;
	}

	function createProd0(json, chr, isUl){

		isUl = typeof(isUl) !== 'undefined' ? false : true;

		var _html = '';

		for(var i in json){
			_html += '<li class="J_forLink" data-url="<?= Yii::$app->request->hostInfo . '/web/product/detail?pid='?>'+ json[i]['pid'] + '">' +
				'<a href="/web/product/detail?pid='+ json[i]['pid'] +'"><img src="'+ json[i]['img'] +'" /></a>' +
				'<h5>' +
				'<a href="/web/product/detail?pid='+ json[i]['pid'] +'">'+ json[i]['name'] +'</a>' +
				'<span>'+ json[i]['desc'] +'</span>' +
				'<em><i>'+ json[i]['comm'] +'</i><i>'+ json[i]['coll'] +'</i></em><b>￥ '+ json[i]['price'] +'</b>' +
				'</h5>' +
				'</li>';
		}

		if(isUl && _html !== '') _html = '<ul id="J_slt_idxCnt'+ chr +'" class="f-cb m-idx-list'+ chr +'">'+ _html +'</ul>';

		return _html;
	}

	function createProd1(json, chr, isUl){

		isUl = typeof(isUl) !== 'undefined' ? false : true;

		var _html = '';

		for(var i in json){
			_html += '<li class="J_forLink" data-url="<?= Yii::$app->request->hostInfo . '/web/product/detail?pid='?>'+ json[i]['pid'] + '">' +
				'<a href="/web/product/detail?pid='+ json[i]['pid'] +'"><img src="'+ json[i]['img'] +'" /></a><span class="'+ json[i]['cls'] +'">'+ json[i]['note'] +'</span>' +
				'<h6>' +
				'<a href="/web/product/detail?pid='+ json[i]['pid'] +'">'+ json[i]['name'] +'</a>' +
				'<em>'+ json[i]['desc'] +'</em>' +
				'<u><b>￥'+ json[i]['price1'] +'</b><small>￥'+ json[i]['price1'] +'</small></u>' +
				'</h6>' +
				'</li>';
		}

		if(isUl && _html !== '') _html = '<ul id="J_slt_idxCnt'+ chr +'" class="f-cb m-idx-list'+ chr +'">'+ _html +'</ul>';

		return _html;
	}
</script>
</body>